<template>
    <div>
        <city-header></city-header>
        <city-search :list="cityList"></city-search>
        <list :hotCity="hotCity" :cityList="cityList" :actAlp="actAlp"></list>
        <alphabet class="alp" :cityList="cityList" @letter="handleLetter"></alphabet>
    </div>
</template>

<style scoped>
.alp{
    position: absolute;
    top: 0rem;
    bottom: 1.94rem;
    right: .2rem;
    z-index: 9;
    height: 100%;
    display: flex;
    justify-content:center;
    align-items:Center;
}
</style>

<script>
import cityHeader from './components/cityHeader'
import citySearch from './components/citySearch'
import list from './components/list'
import alphabet from './components/alphabet'

import axios from 'axios'
export default {
    name:"city",
    components:{
        cityHeader,
        citySearch,
        list,
        alphabet
    },
    data(){
        return{
            title:"城市选择",
            hotCity:[],
            cityList:{},
            actAlp:"",
        }
    },
    methods:{
        getInfo(){
            axios.get("/static/mooc/city.json").then((reg)=>{
                if(reg.data.ret){
                    this.hotCity=reg.data.data.hotCities;
                    this.cityList=reg.data.data.cities;
                }else{
                    alert("数据请求出错");
                }
            })
        },
        handleLetter(val){
            this.actAlp=val;
        }
    },
    mounted(){
        this.getInfo();
    }
}
</script>
